<template>
  <img
    :src="compData.componentProps.imgUrl"
    v-if="compData && compData.componentProps"
    :alt="compData.componentProps.imgAlt"
    v-hv-error-src="
      compData.componentProps.replaceImgUrl &&
      compData.componentProps.replaceImgUrl.length > 0
        ? compData.componentProps.replaceImgUrl
        : transparentImg
    "
    class="hv-picture-box"
  />
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import transparentImg from "@/visual/assets/img/dashboard/transparent.png";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import type PictureBoxPropOptionType from "@/visual/commons/types/picture-box-prop-option-type";

export default defineComponent({
  name: "PictureBox",
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<PictureBoxPropOptionType>>,
      default: () => {
        return {};
      },
    },
  },
  setup() {
    return {
      transparentImg,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./PictureBox.less";
</style>
